<template>
  <div class="box">
    <!-- 头部标题 -->
    <div class="title">客户端列表</div>
    <div class="content">
      <div class="seacher">
        <el-input placeholder="客户端名称" v-model="input" clearable></el-input>
        <!-- 状态查询框1 -->
        <el-select v-model="values" clearable class="selet">
          <el-option
            v-for="item in options"
            :key="item.values"
            :label="item.labels"
            :value="item.values"
          ></el-option>
        </el-select>
        <!-- 状态查询框2 -->
        <el-select v-model="value" clearable class="selet">
          <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 搜索按钮 -->
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <!-- 添加按钮 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="dialogVisible = true"
          >添加</el-button
        >
      </div>
      <div class="tab-list">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :row-style="{ height: '38.5px' }"
          :header-cell-style="headerStyle"
          :cell-style="{ padding: '5px 0' }"
        >
          <el-table-column
            fixed
            prop="data1"
            label="客户端名称"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed
            prop="data2"
            label="登录码"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data3"
            label="支付宝余额"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data4"
            label="今日订单数"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data5"
            label="今日成功订单数"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data6"
            label="总订单数"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data7"
            label="成功订单数"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data8"
            label="总金额"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data9"
            label="总成功金额"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data10"
            label="状态"
            width="100"
            align="center"
            sortable
          >
            <template slot-scope="scope">
              <el-switch
                class="switchStyle"
                v-model="scope.row.on"
                active-color="#7958b5"
                active-text="开"
                inactive-color="#e8e4f3"
                inactive-text="关"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="data11"
            label="当前订单"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data12"
            label="在线状态"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="data13"
            label="创建时间"
            width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="data14"
            label="最后登录时间"
            width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                class="chakan"
                @click="handleClick(scope.row), dialogVisible2 = true"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button class="bianji" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="3"
          background
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="添加客户端"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="dialog-content">
        <div class="dialogtext">
          <span>名称</span>
          <span class="xing">*</span>
        </div>
        <el-input
          class="diaolog-input"
          v-model="inputdialog"
          placeholder="请输入名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click= "nonblank"
          >确 定</el-button
        >
        <el-button @click="dialogVisible = false" class="quixao"
          >取 消</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="修改客户端"
      :visible.sync="dialogVisible2"
      width="30%"
    >
      <div class="dialog-content">
        <div class="dialogtext">
          <span>名称</span>
          <span class="xing">*</span>
        </div>
        <el-input
          class="diaolog-input"
          v-model="editinput"
          placeholder="请输入名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click= "nonblank2"
          >确 定</el-button
        >
        <el-button @click=" dialogVisible2 = false" class="quixao"
          >取 消</el-button
        >
      </span>
    </el-dialog>

   
  </div>
</template>


<script>
export default {
  data() {
    return {
      input: "",
      options: [
        {
          values: "选项1",
          labels: "在线状态",
        },
        {
          values: "选项2",
          labels: "未在线",
        },
        {
          values: "选项3",
          labels: "在线",
        },
      ],
      values: "选项1",

      states: [
        {
          value: "状态a",
          label: "状态",
        },
        {
          value: "状态b",
          label: "正常",
        },
        {
          value: "状态c",
          label: "禁用",
        },
      ],
      value: "状态a",

      tableData: [
        {
          data1: "admin",
          data2: "anjahaki9adadwadwda",
          data3: "199.00",
          data4: 12,
          data5: 10,
          data6: 22,
          data7: 12,
          data8: 866,
          data9: 9999,
          data10: "",
          data11: "",
          data12: "在线",
          data13: "2021-12-11 15:06:32",
          data14: "2021-12-11 17:15:11",
        },
        {
          data1: "admin",
          data2: "anjahaki9adadwadwda",
          data3: "199.00",
          data4: 12,
          data5: 10,
          data6: 22,
          data7: 12,
          data8: 866,
          data9: 9999,
          data10: "",
          data11: "",
          data12: "在线",
          data13: "2021-12-11 15:06:32",
          data14: "2021-12-11 17:15:11",
        },
        {
          data1: "test",
          data2: "anjahaki9adadwadwda",
          data3: "199.00",
          data4: 12,
          data5: 10,
          data6: 22,
          data7: 12,
          data8: 866,
          data9: 9999,
          data10: "",
          data11: "",
          data12: "在线",
          data13: "2021-12-11 15:06:32",
          data14: "2021-12-11 17:15:11",
        },
      ],
      
      // 添加客户端
      dialogVisible : false,
      inputdialog: " ",
      // 添加客户端
      dialogVisible2 : false,
      editinput: " ",

      // 分页
      currentPage4: 4,

    };
  },
  methods: {
    // 修改客户端
    handleClick(row) {
      console.log(row.data1);
      this.editinput = row.data1

    },
    nonblank2() {
      if (this.editinput.length == 0) {
        this.$message.error("不能不为空");
        this.dialogVisible2 = true
      }
      else if (this.editinput.length != 0  ) {
        this.dialogVisible2 = false
        this.$message({
          message: "修改成功",
          type: "success"
        });
      }
    },
    headerStyle() {
      return {
        background: "#f2f2f2",
        height: "38.5px",
        padding: "5px 0",
        textAlign: "center",
        color: "#666",
        fontSize: "14px",
        overflow: " hidden",
      };
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    tableClick() {
      
    },
    // 添加客户端
    nonblank() {

      if (this.inputdialog == " ") {
        console.log(this.inputdialog)
        this.$message.error("不能不为空");
        this.dialogVisible = true
      } else {
        this.dialogVisible = false
        this.$message({
          message: "添加成功",
          type: "success"
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table th.el-table__cell > .cell {
  height: 38.5px;
}
.box {
  margin: 15px;
  background-color: #fff;
}
.title {
  width: 100%;
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid #f6f6f6;
  padding: 0 15px;
  font-size: 14px;
}
.content {
  padding: 0 15px;
}
.seacher {
  margin-bottom: 15px;
  margin-top: 15px;
}
// 输入框
.el-input--suffix {
  width: 182px;
  margin-right: 15px;
}
// 在线状态
.el-select-dropdown__item.selected {
  background-color: #5fb878;
  color: #fff;
}
.el-select-dropdown__item {
  color: #666666;
  padding: 0 10px;
}
.selet {
  color: #666666;
  margin-right: 15px;
}
// 添加查询按钮
.el-button {
  background-color: #009688;
  border: #009688;
  color: #fff;
  margin-right: 15px;
}

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}

.el-switch__label .el-switch__label--left {
  z-index: 9;
  margin-right: -20px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px;
}

// 操作项
.chakan {
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  font-size: 12px;
  border: 1px solid #c9c9c9;
  background-color: #fff;
  color: #555;
}

.bianji {
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  font-size: 12px;
  background-color: #ff5722;
}
// 弹出

.dialog-content,
.dialogtext {
  display: flex;
  justify-content: center;
  line-height: 30px;
}
.xing {
  color: red;
}
.diaolog-input {
  width: 250px;
  height: 30px;
  margin-left: 15px;
}
.queren {
  background: #009688;
  color: #fff;
}
.quixao {
  background: #fff;
  color: #555;
  border: 1px solid #c9c9c9;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
// 分页
.block {
  border: 1px solid #e6e6e6;
  padding: 7px;

}
</style>